<template>
	<view class="code">
		<view class="code-tip-one">请输入验证码
			<view class="code-tip">已向<text>+86 {{phone.substring(0, 3)}}****{{phone.substr(phone.length-4)}}</text>发送验证码
			</view>
			<view class="code-errow" v-if="codeclolor == '#ff0000'">验证码输入错误</view>
		</view>
		<input class="cinput" adjust-position="false" auto-blur="true" @blur="blur" @input="codenum" :focus="focus"
			value="code" v-model="code" type="number" maxlength="6" />
		<view class="code-input">
			<view v-for="(item,index) in 6" :key="index" @click="codefocus(index)"
				:style='(index == code.length? "border: 5rpx solid #1195db;width: 80rpx;height: 80rpx;line-height: 80rpx;":"color: " + codeclolor + ";" +"border: 2rpx solid" + codeclolor)'>
				{{code[index] && code[index] || ''}}
			</view>
		</view>
		<block v-if="sec!=120">
			<view class="recode">重新发送({{sec}}s)</view>
		</block>
		<block v-if="sec==120">
			<view class="secode" @click="sendCode">重新发送</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				// 验证码输入聚焦
				focus: true, //input焦点，用于键盘隐藏后重新唤起
				// 验证码框颜色
				codeclolor: "#313131", //自定义光标的颜色
				// 验证码获取秒数
				sec: '120', //这是重新获取验证码的倒计时(可根据需求修改)
				code: '', //这是用户输入的验证码
				verifyShow: false, //是否禁用按钮
				config:false,
			}
		},
		onLoad(options) {
			this.phone = options.phone
			this.timedown(this.sec) // 倒计时
		},
		methods: {
			// 输入验证码
			codenum: function(event) {
				// console.log('输入的值',event.target.value)
				var that = this
				var code = event.target.value
				that.code = code
				if(this.config){
					return 
				}
				if (code.length == 6) {
					this.config=true
					//调用接口与后端code进行匹配
					let params = {
						userAccount: this.phone,
						smsCode: code,
					}
					uni.$u.http.post(`/base/mobile/userInfo/verifySmsCode`, params).then(res => {
						if (res.code === 0) {
							that.code = []
							event.target.value = ""
							that.config=false
							uni.navigateTo({
								url: '/pages/subPackagesD/login/newPassword?phone='+this.phone
							})
						} else {
							that.codeclolor = "#ff0000"
							setTimeout(function() {
								that.code = []
								event.target.value = ""
								that.config=false
								that.codeclolor = "#313131"
							}, 2000)
						}
					}).catch(()=>{
						that.codeclolor = "#ff0000"
						setTimeout(function() {
							that.code = []
							event.target.value = ""
							that.config=false
							that.codeclolor = "#313131"
						}, 2000)
					})
				}
			},
			// 键盘隐藏后设置失去焦点
			blur: function() {
				var that = this
				that.focus = false
			},
			// 点击自定义光标显示键盘
			codefocus: function(e) {
				var that = this
				if (e == that.code.length) {
					that.focus = true
				}
			},
			sendCode() { //获取验证码
				const params = {
					userAccount: this.phone
				}
				//这里就要显示输入验证码页面了（发送验证码）
				uni.$u.http.post(`/base/mobile/userInfo/sendSmsCode`, params).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '发送成功!',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
				const that = this
				that.timedown(that.sec) // 倒计时
			},

			//倒计时
			timedown: function(num) {
				let that = this;
				if (num == 0) {
					that.verifyShow = false; // 不禁用获取验证码按钮
					that.sec = 120
					return clearTimeout();
				} else {
					that.verifyShow = true; // 禁用获取验证码按钮
					setTimeout(function() {
						that.sec = num - 1
						that.timedown(num - 1);
					}, 1000); //定时每秒减一  
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.code {
		margin: auto;
		margin-top: 50rpx;
		width: 650rpx;
		height: auto;
	}

	.code-tip-one {
		width: 650rpx;
		height: 250rpx;
		line-height: 100rpx;
		font-size: 60rpx;
		font-weight: bold;
		color: #313131;
	}

	.code-tip {
		width: 650rpx;
		height: 100rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		font-weight: normal;
		color: #8a8a8a;
	}

	.code-errow {
		width: 650rpx;
		height: 50rpx;
		line-height: 25rpx;
		font-size: 28rpx;
		font-weight: normal;
		color: #ff0000;
	}

	.code-tip>text {
		padding: 0 20rpx;
		width: 650rpx;
		font-size: 30rpx;
		font-weight: normal;
		color: #ff5500;
	}

	.code-input {
		margin: auto;
		width: 650rpx;
		height: 100rpx;
		display: flex;
	}

	.code-input>view {
		margin-top: 5rpx;
		margin-left: 15rpx;
		width: 86rpx;
		height: 86rpx;
		line-height: 86rpx;
		font-size: 60rpx;
		font-weight: bold;
		color: #313131;
		text-align: center;
		border-radius: 10rpx;
	}

	.code-input>view:nth-child(1) {
		margin-left: 0rpx;
	}

	.cinput {
		position: fixed;
		left: -100rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.recode {
		margin-top: 20rpx;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #707070;
		font-size: 28rpx;
	}
	.secode{
		margin-top: 20rpx;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ff5500;
		font-size: 28rpx;
	}
</style>